<template>
  <!-- 左栏 -->
  <div class="left-col">
    <div class="lan sticky-lan">
      <!-- 用户栏 -->
      <UserModel />

      <!-- 标签 -->
      <LabelCount />

      <!-- 公告栏 -->
      <NoteModel />
    </div>
  </div>
</template>

<script>
import LabelCount from "./LanComps/LabelCount.vue";
import UserModel from "./LanComps/UserModel.vue";
import NoteModel from "./LanComps/NoteModel.vue";

export default {
  setup() {},
  components: {
    LabelCount,
    UserModel,
    NoteModel,
  },
};
</script>

<style scoped>
.left-col {
  margin-right: 20px;
  order: 1;
  width: 150px;
}
.sticky-lan {
  position: sticky;
  top: 80px;
}
/* 三档，最小，用于手机，左右栏全部隐藏，中间栏最大，顶栏折叠 */
@media screen and (max-width: 600px) {
  .left-col {
    display: none;
  }
}
</style>